<script>
import report from "../../js/api/report";

const app = getApp()
export default {
  name: "flows",
  data(){
    return{
      checkoutList: [],
      voucherDate: '',
      voucherIndex: 0,
      reportItemList: [],
    }
  },
  onLoad() {
    this.init()
  },
  watch: {
    voucherDate() {
      this.loadData()
    }
  },
  methods:{
    init() {
      this.checkoutList = uni.getStorageSync(app.globalData.data.cache_checkout_list)
      this.voucherDate = this.checkoutList[0]
    },
    pickerChange(e) {
      this.voucherIndex = e.detail.value
      this.voucherDate = this.checkoutList[e.detail.value]
    },
    toNext() {
      if (this.voucherIndex === 0) {
        app.globalData.showToast(this.checkoutList[this.voucherIndex] + '是最新期数');
      } else {
        this.voucherIndex -= 1
        this.voucherDate = this.checkoutList[this.voucherIndex]
      }
    },
    toBack() {
      if (this.voucherIndex + 1 === this.checkoutList.length) {
        app.globalData.showToast('没有数据了');
      } else {
        this.voucherIndex += 1
        this.voucherDate = this.checkoutList[this.voucherIndex]
      }
    },
    loadData() {
      report.xjll({
        voucherDate: this.voucherDate,
        dimension: 'TERM',
        reset: false
      }).then((res) => {
        console.log("res = ",res)
        this.reportItemList = res
      })
    },
  }
}
</script>

<template>
  <view class="page">
    <view class="section">
      <view class="tc flex">
        <uni-icons type="left" class="flex-1 tr padding-right-default" @click="toBack"></uni-icons>
        <picker mode="selector" :value="voucherIndex" :range="checkoutList" @change="pickerChange">
          <view>
            {{voucherDate}}
          </view>
        </picker>
        <uni-icons type="right" class="flex-1 tl padding-left-default" @click="toNext"></uni-icons>
      </view>
    </view>
    <view class="section">
      <view class="flex padding-m br-b-f5">
        <view class="flex-3">项目</view>
        <view class="flex-1">本期</view>
        <view>本年</view>
      </view>
      <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 90vh;">
        <view v-for="(reportItem,reportItemIndex) in reportItemList">
          <view class="flex padding-m br-b-f5" :style="{fontWeight: reportItem.isBolder ? 'bold':'normal'}">
            <view class="flex-3">{{reportItem.title}}</view>
            <view class="flex-1">{{reportItem.values['本期金额']?reportItem.values['本期金额']:'——'}}</view>
            <view>{{reportItem.values['本年累计金额']?reportItem.values['本年累计金额']:'——'}}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>